{include file="public/_header"}
<style>
    #tableContainer + .layui-table-view .layui-table-body tbody > tr > td {
        padding: 0;
    }

    #tableContainer + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
        height: 100px;
        line-height: 100px;
    }

    .tb-img-circle {
        width: 80px;
        height: 80px;
        border: 2px solid #dddddd;
    }
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="tableContainer" lay-filter="tableContainer"></table>
        </div>
    </div>
</div>
<input type="hidden" name="pid" id="pid" value="{$pid}">
{include file="public/_footer"}
<script>
    var pid = 0;
    layui.use(['layer', 'form', 'admin', 'table', 'util', 'xmSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var admin = layui.admin;
        var util = layui.util;

        pid = $('#pid').val();

        initTable();


        function initTable() {
            var url = "{:url('getData')}?pid=" +pid;
            var insTb = table.render({
                elem: '#tableContainer',
                url: url,
                page: true,
                toolbar: ['<p>',
                    '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                    '</p>'].join(''),
                cellMinWidth: 100,
                cols: [[
                    {field: 'id', title: 'ID', width: '5%'},
                    {field: 'title_zh', title: '标题(中文)', templet : function (d) {
                            return d.title_zh + '|' + d.title_en + '|' + d.title_jp + '|' + d.title_kr;
                        }
                    },
                    // {field: 'title_en', title: '标题(英语)'},
                    // {field: 'title_jp', title: '标题(日语)'},
                    // {field: 'title_kr', title: '标题(韩语)'},
                    {
                        field: 'img_src', title: '封面', templet: function (d) {
                            var url = d.img_src;
                            return '<img src="' + url + '" class="tb-img-circle" tb-img alt=""/>';
                        }
                    },
                    {field: 'sort', title: '排序'},
                    {title: '操作', toolbar: '#barDemo', align: 'center'}
                ]]
            });
        }

        table.on('tool(tableContainer)', function (obj) {
            if (obj.event === 'edit') { // 修改
                window.location.href = 'edit.html?id=' + obj.data.id;
            } else if (obj.event === 'del') { // 删除
                layer.confirm('确定要删除吗？', {
                    btn: ['确定', '取消']
                }, function (e) {
                    doDel(obj.data.id);
                });
            }else if (obj.event === 'subCate') {
                // 查看下级分类
                window.location.href = 'index.html?pid=' + obj.data.id;
            }
        });

        table.on('toolbar(tableContainer)', function (obj) {
            if (obj.event === 'add') { // 修改
                window.location.href = 'add.html?pid=' + pid;
            }
        });

        function doDel(id) {
            var data = {
                'id': id
            };
            $.getJSON("{:url('del')}", data, function (res) {
                layer.open({
                    type: 1
                    , offset: 'auto'
                    , id: 'layerDemo' //防止重复弹出
                    , content: '<div style="padding: 20px 100px;">' + res.msg + '</div>'
                    , btn: '关闭'
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        window.location.href = "{:url('index')}";//'index.html';
                        layer.closeAll();
                    }
                });
            });
        }

    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="subCate">查看下级分类</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>